<template>
	<view class="report uni-common-pt">
		<view class="form form-a">
			<view class="form-group">
				<view class="form-item">
					<view class="form-item-header">当前位置：{{ name }}</view>
					<view class="form-item-body">
						<view class="card card-address">
							<textarea
								v-model="eventAddress"
								class="card-content"
								placeholder="请输入或选择定位获取位置信息">
							</textarea>
							<view class="card-icon" @tap="openMap">
								<image class="icon" src="@/static/icon/iv_location.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="panel" v-for="(data, index) in datas" :key="index">
			<view class="panel-header form form-a" >
				<view class="form-group">
					<view class="form-item">
						<view class="form-item-header">{{ data.dictNum }}. {{ data.name }}</view>
						<view class="form-item-body">
							<radio-group class="radio-group" @change.stop.prevent="radioChange($event, data)">
								<label class="radio-item" v-for="(radio, index) in data.radioItems" :key="index">
									<view class="radio-item-header">
										<radio :value="radio.value" :checked="radio.value === data.status" />
									</view>
									<view class="radio-item-body">{{ radio.name }}</view>
								</label>
							</radio-group>
						</view>
					</view>
				</view>
			</view>

			<view class="panel-body form form-a" v-show="data.status == '1'">
				<view class="form-group">
					<view class="form-item">
						<view class="form-item-header">
							问题描述：
						</view>
						<view class="form-item-body">
							<textarea class="form-control" v-model="data.content"></textarea>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item-header">
							拍摄图片：
						</view>
						<view class="form-item-body">
							<view class="list list-p">
								<view class="list-group">
									<view class="list-item"  v-for="(baseImage, index) in data.baseImages" :key="index">
										<view class="card card-a" @tap="viewPic(data, index)">
											<view class="card-header">
											</view>
											<view class="delete" @tap.stop.prevent="delPic(data, index)">
												<image class="icon" mode="aspectFit" src="@/static/icon/delete-icon.png"></image>
											</view>
											<view class="card-body">
												<image class="icon" mode="aspectFit" :src="baseImage"></image>
											</view>
										</view>
									</view>

									<view class="list-item">
										<view class="card card-a upload" @tap="getPic(data)">
											<view class="card-body">
												<image class="icon" mode="aspectFit" src="@/static/icon/iv_pic_add.png"></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="form-item">
						<view class="form-item-header">
							拍摄视频：
						</view>
						<view class="form-item-body" v-show="data.video">
							<view class="video-box">
								<video class="video" :src="data.video"></video>
							</view>
						</view>

					</view>
				</view>

				<view class="btns">
					<view class="btns-group">
						<button class="btn btn-a" @tap="getVideo(data)">拍摄视频</button>
					</view>
				</view>
			</view>
		</view>

		<view class="btns">
			<view class="btns-group">
				<button class="btn btn-a" @tap="bindReport">上报</button>
			</view>
		</view>
	</view>
</template>

<script>
	import { insertSzbmJsdBusinessBeforeVideo, insertSzbmJsdBusinessBefore } from '@/api/configure.js';
	import {chooseImage, deepClone, mergeUrls, getUserInfo, formatDateStr, getBaseImages, previewImage} from '@/util/util.js';
	import configUrl from '@/util/url.js';
	export default {
		data() {
			return {
				userInfo: {},
				jsdId: '',
				businessId: '',
				jsdType: '',
				gcjGeometry: '',
				longitude: 108.937981,
				latitude: 34.230517,
				gdx: '',
				gdy: '',
				status: '',
				name: '',
				eventAddress: '',
				datas: [{
					dictNum: 1,
					name: '积水点周边雨污水管道、雨水篦子排水是否通畅',
					status: '0',
					content: '',
					images: [],
					baseImages: [],
					video: '',
					radioItems: [{
						value: '0', name: '是',
					}, {
						value: '1', name: '否',
					}]
				}, {
					dictNum: 2,
					name: '积水点周边雨污水检查井内是否安装防坠网',
					status: '0',
					content: '',
					images: [],
					baseImages: [],
					video: '',
					radioItems: [{
						value: '0', name: '是',
					}, {
						value: '1', name: '否',
					}]
				}, {
					dictNum: 3,
					name: '积水点周边路灯、信号灯是否存在漏电',
					status: '0',
					content: '',
					images: [],
					baseImages: [],
					video: '',
					radioItems: [{
						value: '1', name: '是',
					}, {
						value: '0', name: '否',
					}]
				}, {
					dictNum: 4,
					name: '是否存在其他紧急事项',
					status: '0',
					content: '',
					images: [],
					baseImages: [],
					video: '',
					radioItems: [{
						value: '1', name: '是',
					}, {
						value: '0', name: '否',
					}]
				}],
			}
		},
		methods: {
			getLocationData({
				latitude,
				longitude,
				address
			}) {
				this.latitude = latitude;
				this.longitude = longitude;

				if(address){
					if(typeof address == 'string') {
						this.eventAddress = address;
					}
				}

			},
			openMap() {
				let params = {
					gdx: this.gdx,
					gdy: this.gdy,
					type: 'GET'
				}

				let url = mergeUrls('/pages/map/index', params);

				uni.navigateTo({
					url: url
				});
			},
			radioChange(e, data) {
				let val = e.target.value;

				data.status = val;
			},
			async getPic(data) {
				var _this = this;

				let res = await chooseImage();
				
				let tempFilePaths = res.tempFilePaths.slice(0);
				
				data.images = data.images.concat(tempFilePaths);
				
				let baseImages = await getBaseImages(tempFilePaths);
				
				data.baseImages = data.baseImages.concat(baseImages);
			},
			delPic(obj, index) {
				obj.images.splice(index, 1);
				obj.baseImages.splice(index, 1);
			},
			viewPic(obj, index) {
				previewImage({
					urls: obj.images,
					current:index
				})
			},
			uploadVideo(obj) {
				return new Promise((resolve, reject) => {
					insertSzbmJsdBusinessBeforeVideo({
						businessId: this.businessId,
						jsdId: this.jsdId,
						dictNum: obj.dictNum,
						isSend: 1,
					}, obj.video).then((res) => {
						resolve(res);
					}, ()=> {
						reject();
					});
				})
			},
			getVideo(obj) {
				var _this = this;

				uni.chooseVideo({
					count: 1,
				    sourceType: ['camera', 'album'],
					success: res => {
						obj.video = res.tempFilePath;
					}
				});
			},
			bindReport() {
				if(!this.latitude){
					uni.showToast({
					    title: '请选择定位获取位置信息',
					    duration: 2000,
						icon: 'none',
						mask: true
					});

					return
				}

				if(!this.eventAddress){
					uni.showToast({
					    title: '请输入位置信息',
					    duration: 2000,
						icon: 'none',
						mask: true
					});

					return
				}

				let szbmJsdBusinessBeforeProblems = [];

				szbmJsdBusinessBeforeProblems = this.datas.reduce((prev, cur) => {
						let images = cur.baseImages.map( item => {
							let ret = {
								image: item.split(',')[1]
							}

							return ret;
						})

						let ret = {
							dictNum: cur.dictNum,
							status: cur.status
						}

						if(images.length > 0) {
							ret['images'] = images;
						}

						if (cur.content) {
							ret['remark'] = cur.content;
						}

						prev.push(ret)

					return prev;
				}, [])

				let status = this.datas.find( data => data.status == '1' );

				let data = {
					jsdId: this.jsdId,
					businessId: this.businessId,
					jsdType: this.jsdType,
					gcjGeometry: `${this.longitude} ${this.latitude}`,
					status: status ? '1' : '0' ,
					szbmJsdBusinessBeforeProblems: JSON.stringify(szbmJsdBusinessBeforeProblems),
					createBy: this.userInfo.userId
				}

				insertSzbmJsdBusinessBefore(data).then( res => {
					let u = [];

					u = this.datas.reduce((prev, cur) => {
						if(cur.video){
							prev.push(this.uploadVideo(cur));
						}

						return prev;
					}, [])

					if(u.length > 0) {
						Promise.all(u).then(uploadRes => {
							this.close();
						})
					} else {
						this.close();
					}
				})
			},
			back() {
			    uni.navigateBack({
			        delta: 1
			    });
			},
			close() {
				uni.showToast({
				    title: '操作成功',
				    duration: 2000,
					icon: 'none',
					mask: true
				});

				uni.$emit('floodControl.deploy.checkJsd', {
					'jsdID': this.jsdId
				})

				setTimeout(()=> {
					uni.navigateBack({
					    delta: 1
					});
				}, 2000);
			},
			back() {
			    uni.navigateBack({
			        delta: 1
			    });
			},
			init() {
				uni.$on('receiveLocationData', this.getLocationData);

				this.userInfo = getUserInfo();
			}
		},
		onUnload() {
			uni.$off('receiveLocationData');
		},
		onBackPress(options) {
			let _this = this;

			if (options.from === 'navigateBack') {
				return false;
			}

			uni.showModal({
			    content: '确定退出当前页面吗？',
			    success: function (res) {
			        if (res.confirm) {
			           _this.back();
			        } else if (res.cancel) {

			        }
			    }
			});

			return true;
		},
		onLoad(option) {
			this.jsdId = option.jsdId;
			this.jsdType = option.jsdType;
			this.businessId = option.businessId;
			this.name = option.name;
			this.address = option.address;
			this.gdx = option.gdx;
			this.gdy = option.gdy;

			this.init();
		},
		onBackPress(options) {
			let _this = this;

			if (options.from === 'navigateBack') {
				return false;
			}

			uni.showModal({
			    content: '确定退出当前页面吗？',
			    success: function (res) {
			        if (res.confirm) {
			           _this.back();
			        } else if (res.cancel) {

			        }
			    }
			});

			return true;
		}
	}
</script>

<style lang="scss">
	.report{
		background-color: #ffffff;
	}
	.form {

	}

	.form-a {
		.form-group {
			.form-item {
				margin-bottom: 20rpx;

				.form-item-header {
					margin-bottom: 20rpx;
					padding: 8rpx 0rpx 8rpx 30rpx;
					font-size: 28rpx;
					line-height: 120%;
					color: #767676;
				}

				.form-item-body {
					padding: 0rpx 30rpx;

					.form-control-static {
						min-height: 200rpx;
						padding: 20rpx;
						font-size: 24rpx;
						border-radius: 10rpx;
						line-height: 120%;
						background-color: #ececec;
						box-sizing: border-box;
					}

					.form-control {
						width: 100%;
						height: 200rpx;
						padding: 20rpx;
						font-size: 24rpx;
						border-radius: 10rpx;
						line-height: 120%;
						box-sizing: border-box;
						border: 1px solid #c4c4c4;
					}
				}
			}
			.form-item-tip{
				padding: 8rpx 30rpx;
				font-size: 28rpx;
				line-height: 120%;
				color: #d81e06;
			}
		}
	}

	.radio-group{
		display: flex;
		padding: 0px 10px;
		width: auto;
		.radio-item{
			display: flex;
			width: 25%;
			align-items: center;
			.radio-item-header{

			}
			.radio-item-body{
				padding: 0rpx 0rpx;
				font-size: 28rpx;
				color: #767676;
			}
		}
	}



	.card {}

	.card-address {
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.card-content {
			height: 120rpx;
			margin: 0rpx 100rpx 0rpx 0rpx;
			padding: 20rpx;
			font-size: 24rpx;
			border-radius: 10rpx;
			line-height: 120%;
			box-sizing: border-box;
			border: 1px solid #c4c4c4;
		}

		.card-icon {
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			margin: 20rpx 0rpx 20rpx 10rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}
	}

	.card-a {
		width: 223rpx;
		margin: 0rpx auto;
		border-radius: 5rpx;
		border: 1rpx solid #a2a2a2;
		position: relative;
		top: 0rpx;
		left: 0rpx;

		.card-body {
			height: 143rpx;

			.icon {
				width: 100%;
				height: 100%;
			}
		}

		&.upload {
			border: none;
		}

		.card-header {
			width: 100%;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			left: 0rpx;
			background-color: #000000;
			opacity: 0.3;
			z-index: 2;
		}

		.delete {
			width: 31rpx;
			height: 31rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			z-index: 3;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				width: 20rpx;
				height: 20rpx;
			}
		}

	}



	.list {
		&.list-p{
			.list-group {
				display: flex;
				flex-wrap: wrap;
				.list-item {
					margin-bottom: 20rpx;
					width: 33.33%;
				}
			}
		}
	}

	.btns {
		background-color: #ffffff;
		.btns-group {
			padding: 17rpx 30rpx;
			display: flex;

			.btns-item {
				width: 50%;
				padding: 0rpx 10rpx;
			}
		}

	}

	.btn {
		width: 100%;
		padding: 20rpx 0px;
		font-size: 24rpx;
		line-height: 120%;
		color: #fff;
		text-align: center;
		border: none;
		border-radius: 6rpx;
		background: none;
		&:after {
			display: none;
		}

		&.btn-a {
			background-color: #c4534c;
		}
	}

	.video-box{
		height: 200rpx;
		.video{
			width: 100%;
			height: 100%;
		}
	}
</style>
